<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
</head>

<body>
	<style>
		#characterEditForm .form-item{margin-bottom: 20px;}
		#characterEditForm .form-item>label{min-width: 72px; display: inline-block; text-align: right;}
		#permission-tree{display: inline-block; width: 350px; max-height: 200px; overflow-y: auto; vertical-align: middle;}
	</style>
	<div class="super-theme-example">
		<div class="options-toolbar">
			<div class="top-options">
				<a href="javascript:void(0)" class="easyui-linkbutton info" data-options="iconCls:'fa fa-plus'" onclick="character.methods.addCharacter()">新建</a>				
			</div>
		</div>
		<table id="character-datagrid"></table>
		<div id="characterEditWin" class="easyui-window" title="角色" style="width:500px; height: 450px;" data-options="modal:true,closed:true,minimizable:false,maximizable:false">
			<div class="super-theme-example">
				<form id="characterEditForm">
					<input type="hidden" name="id">
					<div class="form-item">
		                <label for="" class="label-top">名称：</label>
		                <input name="name" class="easyui-textbox" style="width: 350px;" prompt="名称...">
		            </div>
		            <div class="form-item">
		                <label for="" class="label-top">值：</label>
		                <input name="value" class="easyui-textbox" style="width: 350px;" prompt="值...">
					</div>
					<div class="form-item">
						<label for="" class="label-top">权限：</label>
						<ul id="permission-tree"></ul>
					</div>
				</form>
				<div style="text-align: right; box-sizing: border-box;padding: 10px;">
					<a href="#" class="easyui-linkbutton" style="width: 80px;" onclick="$('#characterEditWin').window('close');">取消</a>
					<a href="#" class="easyui-linkbutton primary" style="width: 80px;" onclick="character.methods.editSubimt();">保存</a>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		
		var character = {
			data: {
                permissionTypeList: [], // 权限列表
                characterList: [] // 角色列表
			},
			methods: {
                initDatagrid : function(){
					$('#character-datagrid').datagrid({
						height: $(document).height() - 200,
					    url: commonConfig.mgUrlPrefix() + '/uaa/role',
					    pagination: false,
					    columns:[[
							{field:'name',title:'名称',width:100,align:'center'},
							{field:'value',title:'值',width:100,align:'center'},
							{field:'options',title:'操作',width:180,align:'center', formatter: function(value,row,index){
								return '<div class="row-edit-group">' +
									        '<a onclick="character.methods.editCharacter(' + index + ')">编辑</a>' +
									        '<a onclick="character.methods.deleteCharacter(' + index + ')">删除</a>' + 
									   '</div>';
							}}
					    ]]
					});
				},
				findTreeChildrens: function(treeDatas){
					if(!treeDatas.children || treeDatas.children.length == 0) return null ;
					var _children = [] ;
					$.each(treeDatas.children, function(index , _temp) {
						var childrenNode = {
							id: _temp.id,
					 		text: _temp.name
						};
						var _tempChildren = character.methods.findTreeChildrens(_temp);
						if(_tempChildren){
							childrenNode.children = _tempChildren ; 
						}
						_children.push(childrenNode);
					});
					return _children ; 
				},
				initPermissionTree: function(authorities){
					$('#permission-tree').tree({
                		method: 'get',
                		url: commonConfig.mgUrlPrefix() + '/uaa/authority',
                		checkbox: true,
                		loadFilter: function(data,parent){
							if(data && data.code == 1){
								if(data.datas.length == 0){
									return [{'text' : '没有数据'}];
								}else{
									var _treeData = [] ; 
									$.each(data.datas, function(index , treeData) {
										var _tmpData = {
										 		id: treeData.id,
										 		text: treeData.name
										};
										var _tmpDataChildren = character.methods.findTreeChildrens(treeData);
										if(_tmpDataChildren){
											_tmpData.children = _tmpDataChildren ; 
										}
										 _treeData.push(_tmpData);
									});
									return _treeData ; 
								}
							}
							return [] ; 
						},
						onClick: function(node){
							$('#permission-tree').tree('toggle', node.target);
						},
						onLoadSuccess: function(node, data){
							if(authorities && authorities.length > 0)character.methods.writeBackPermission(authorities);
							$('#permission-tree').tree('collapseAll');
						}
                	});
				},
				writeBackPermission: function (data) {
                    $(data).each(function (index, item) {
                        if (item.type && item.type == 3) {
                            // 选中叶子节点
                            var node = $('#permission-tree').tree('find', item.id);
                            $('#permission-tree').tree('check', node.target);
                        }
                    })
                },
				addCharacter: function(){
                	$('#characterEditWin').window('open');
                	$('#characterEditForm').form('clear');
                	character.methods.initPermissionTree();
                },
				editCharacter: function(index){
					var _rowData = $('#character-datagrid').datagrid('getRows')[index];
                	requestServer(commonConfig.mgUrlPrefix() + '/uaa/role/'+_rowData.id , 'GET').then((response) => {
						if (response.code == 1) {
		                	character.methods.initPermissionTree(response.datas.authorities);
		                	$('#characterEditForm').form('clear');
		                	$('#characterEditForm').form('load' , {id: _rowData.id, name: _rowData.name, value:_rowData.value});
		                	$('#characterEditWin').window('open');
						}else {
							$.messager.alert('提示',response.message,'error');
						}
					}).catch((error) => {
						console.log(error)
					});
				},
				editSubimt: function(){
					var _params = $('#characterEditForm').serializeJson();
					if(_params.name.trim() == ''){
						$.messager.alert('提示', '角色名称不能为空','error');
							return false
					}
					if(_params.value.trim() == ''){
						$.messager.alert('提示', '角色值不能为空','error');
						return false
					}
					var authorities = [];
					$.each($('#permission-tree').tree('getChecked', ['checked','indeterminate']) , function(index, _checked){
						authorities.push({id: _checked.id});
					});
					_params.authorities = authorities ; 
					requestBodyServer(commonConfig.mgUrlPrefix() + '/uaa/role' , 'POST', _params).then((response) => {
						if (response.code == 1) {
							showMessage('<i class="fa fa-info-circle"></i>&nbsp; 请求成功...');
							$('#characterEditWin').window('close');
							$('#character-datagrid').datagrid('reload');
						}else {
							$.messager.alert('提示',response.message,'error');
						}
					}).catch((error) => {
						console.log(error)
					});
				},
				deleteCharacter: function(index){
					$.messager.confirm('提示', '确定取消?', function(r){
						if(r){
							var _row = $('#character-datagrid').datagrid('getRows')[index];
							requestServer(commonConfig.mgUrlPrefix() + '/uaa/role/'+_row.id , 'DELETE').then((response) => {
								if (response.code == 1) {
									showMessage('<i class="fa fa-info-circle"></i>&nbsp; 请求成功...');
									$('#character-datagrid').datagrid('reload');
								}else {
									$.messager.alert('提示',response.message,'error');
								}
							}).catch((error) => {
								console.log(error)
							});
						}
					});
				}
			},
			init: function () {
				character.methods.initDatagrid();
			}
		}
		$(function () {
			character.init()
		})
	</script>
</body>

</html>